<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://d3js.org/d3.v7.min.js"></script>

<body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>


</body>
<style>
    svg {
        border: 1px solid red
    }
</style>
<script>
    window.onload = () => {
        d3.select('body').append('span').text('什么档次，跟我看同一个电视')
        var arr = ['gqq', 'gqs', 'cst']
        // 数组和元素一一对应时，数组为update；可省略
        // 数组多于元素时，多出部分为enter.如果不一致，数组元素个数比p节点多，就插入p节点补足并相应更新文本,一般结合.enter().append('rect')
        // 元素多于数组时，多出部分为exit.如果不一致，数组元素个数比p节点少，就删除多余的p节点一般结合。exit()NaNpxove()
        d3.select('body').selectAll('p').data(arr).text((el, i) => {
            return el
        })
        // 柱状图
        var arr2 = [
            { name: '马云', money: 160 },
            { name: '马化腾', money: 170 },
            { name: '王健林', money: 150 },
            { name: '马斯克', money: 200 },
            { name: '许家印', money: 100 },
        ]
        var svg = d3.select('body').append('svg').attr('width', 800).attr('height', 500)
        var g = svg.append('g')
        g.attr('fill','red')
        g.selectAll('rect').data(arr2).enter()
            .append('rect')
            .attr('x', (el, i) => {
                return 40*i+30*(i+1)
            })
            .attr('y', (el, i) => {
                return 500-el.money
            })
            .attr('width', (el, i) => {
                return 40
            })
            .attr('height', (el, i) => {
                return el.money
            })
    }



</script>

</html>